<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import router from "@/router/index";
import { _$, $ } from "./edit";

const uploadServerUrl = `${import.meta.env.VITE_API_SERVER}`;
const formRef = ref();

onMounted(() => {
  $.loadEdit();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">更改头像</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <el-descriptions title="更改头像">
        <el-descriptions-item>
          <el-form
            ref="formRef"
            :model="_$.requestParam"
            :rules="_$.rules"
            label-width="auto"
            size="small"
            style="max-width: 600px"
          >
            <el-form-item label="头像" prop="headImage">
              <el-upload
                class="avatar-uploader"
                action="/ats/user/uploadHeadImage"
                :headers="_$.headers"
                :show-file-list="false"
                :on-success="$.onUploadSuccess"
                :before-upload="$.onBeforeUpload"
              >
                <el-image
                  v-if="_$.requestParam.headImage"
                  :src="uploadServerUrl + _$.requestParam.headImage"
                  fit="cover"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </el-space>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
